<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>富金银行</title>
<link rel="icon" href="./images/logo_icon.png" type="image/x-icon"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
</head>
<style>
span.reference {
	position: fixed;
	left: 5px;
	top: 5px;
	font-size: 10px;
	text-shadow: 1px 1px 1px #fff;
}

span.reference a {
	color: #555;
	text-decoration: none;
	text-transform: uppercase;
}

span.reference a:hover {
	color: #000;
}

h1 {
	color: #ccc;
	font-size: 36px;
	text-shadow: 1px 1px 1px #fff;
	padding: 20px;
}

p .nameCss {
	float: left;
	width: 110px;
	height: 26px;
	margin-top: 10px;
}
</style>
<script type="text/javascript">
	function checkUsername() {
		var divEle = document.getElementsByName("uName")[0];
		var divSpan = document.getElementById("nameError");
		var regx = new RegExp("^[a-zA-Z\u4e00-\u9fa5]{2,}$");
		if (divEle.value != "") {
			if (regx.test(divEle.value)) {
				divSpan.innerHTML = "";
				return true;
			} else {
				divSpan.innerHTML = "非法字符".fontcolor('red');
				return false;
			}
		}
		divSpan.innerHTML = "请输入用户名".fontcolor('red');
		return false;
	}
	function checkPassword() {
		var divEle = document.getElementsByName("uPassword")[0];
		var divSpan = document.getElementById("passwordError");
		var regx = new RegExp("^[a-zA-Z0-9\\_]{1,}$");
		if (divEle.value != "") {
			if (regx.test(divEle.value)) {
				divSpan.innerHTML = "";
				return true;
			} else {
				divSpan.innerHTML = "非法字符".fontcolor('red');
				return false;
			}
		}
		divSpan.innerHTML = "请输入密码".fontcolor('red');
		return false;
	}
	function checkrePassword() {
		var divEle = document.getElementsByName("rePassword")[0];
		var divSpan = document.getElementById("repasswordError");
		var divEle01 = document.getElementsByName("uPassword")[0];
		if (divEle.value == "") {
			divSpan.innerHTML = "请输入密码".fontcolor('red');
			return false;
		}
		if (divEle.value == divEle01.value) {
			divSpan.innerHTML = "";
			return true;

		} else {
			divSpan.innerHTML = "密码不一致".fontcolor('red');
			return false;
		}

	}
	function checkuCardid() {
		var divEle = document.getElementsByName("uCardid")[0];
		var divSpan = document.getElementById("uCardidError");
		var regx = new RegExp("^[0-9]{3,}$");
		if (divEle.value != "") {
			if (divEle.value.length < 18) {
				divSpan.innerHTML = "长度不够".fontcolor('red');
				return false;
			} else if (regx.test(divEle.value)) {
				divSpan.innerHTML = "";
				return true;
			} else {
				divSpan.innerHTML = "非法字符".fontcolor('red');
				return false;
			}
		}
		divSpan.innerHTML = "请输入身份证号".fontcolor('red');
		return false;
	}
	function checkuEmail() {
		var divEle = document.getElementsByName("uEmail")[0];
		var divSpan = document.getElementById("uEmailError");
		var regx = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$");
		if (divEle.value != "") {
			if (regx.test(divEle.value)) {
				divSpan.innerHTML = "";
				return true;
			} else {
				divSpan.innerHTML = "格式错误".fontcolor('red');
				return false;
			}
		}
		divSpan.innerHTML = "请输入邮箱".fontcolor('red');
		return false;
	}
	function checkuTelphone() {
		var divEle = document.getElementsByName("uTelphone")[0];
		var divSpan = document.getElementById("uTelphoneError");
		//var regx = new RegExp("^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$");
		var regx = new RegExp("^[0-9]{3,}$");
		if (divEle.value != "") {
			if (regx.test(divEle.value)) {
				divSpan.innerHTML = "";
				return true;
			} else {
				divSpan.innerHTML = "格式错误".fontcolor('red');
				return false;
			}
		}
		divSpan.innerHTML = "请输入手机号码".fontcolor('red');
		return false;
	}

	function login() {

		//console.info(checkUsername());
	//	console.info(checkUsername() && checkPassword() && checkrePassword() && checkuCardid()&&checkuEmail()&&checkuTelphone());
		if (checkUsername() && checkPassword() && checkrePassword() && checkuCardid()&&checkuEmail()&&checkuTelphone()) {
			document.formElem.submit();
		}

	}
</script>
<body  style="background-image: url('./images/shattered.png');">
	<div id="content" style="height:600px;">
		<div><h1 style="font-size: 40px;">FUKIN BANK REGISTER</h1></div>
		<div id="wrapper" >
			<div id="steps" style="">
				<form id="formElem" name="formElem" action="<c:url value='/user/register.do'/>" method="post">
					<fieldset class="step" style="">
						<legend>Account</legend>
						<p>
							<label for="name">真实姓名：</label>
							<input id="name" name="uName" type="text" AUTOCOMPLETE=OFF onblur="checkUsername();" />
							<span id="nameError" class="nameCss"></span>
						</p>
						<p>
							<label for="password">密码：</label>
							<input id="password" name="uPassword" type="password" AUTOCOMPLETE=OFF placeholder="数字、字母、下划线" onblur="checkPassword();checkrePassword();" />
							<span id="passwordError" class="nameCss"></span>
						</p>
						<p>
							<label for="repassword">确认密码：</label>
							<input id="repassword" name="rePassword" type="password" AUTOCOMPLETE=OFF onblur="checkrePassword();" />
							<span id="repasswordError" class="nameCss"></span>
						</p>
					</fieldset>
					<fieldset class="step">
						<legend>Personal Details</legend>
						<p>
							<label for="shenfenzheng">身份证号：</label>
							<input id="shenfenzheng" name="uCardid" type="text" AUTOCOMPLETE=OFF onblur="checkuCardid();" />
							<span id="uCardidError" class="nameCss"></span>
						</p>
						<p>
							<label for="email">Email：</label>
							<input id="email" name="uEmail" placeholder="info@html.com" type="email" AUTOCOMPLETE=OFF onblur="checkuEmail();"/>
							<span id="uEmailError" class="nameCss"></span>
						</p>
						<p>
							<label for="phone">电话号码：</label>
							<input id="phone" name="uTelphone" placeholder="+86-9090910" type="tel" AUTOCOMPLETE=OFF onblur="checkuTelphone();"/>
							<span id="uTelphoneError" class="nameCss"></span>
						</p>

					</fieldset>
					<%--<fieldset class="step">
                            <legend>Payment</legend>
                            <p>
                                <label for="cardtype">Card</label>
                                <select id="cardtype" name="cardtype">
                                    <option>Visa</option>
                                    <option>银联</option>
                                    <option>American Express</option>
                                </select>
                            </p>
                            <p>
                                <label for="cardnumber">卡排号：</label>
                                <input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="secure">卡ID：</label>
                                <input id="secure" name="uCId" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="namecard">开卡人姓名：</label>
                                <input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>Settings</legend>
                            <p>
                                <label for="newsletter">通知：</label>
                                <select id="newsletter" name="newsletter">
                                    <option value="Daily" selected>每日</option>
                                    <option value="Weekly">每周</option>
                                    <option value="Monthly">每月</option>
                                    <option value="Never">从不</option>
                                </select>
                            </p>
                            <p>
                                <label for="updates">更新通知：</label>
                                <select id="updates" name="updates">
                                    <option value="1" selected>Package 1</option>
                                    <option value="2">Package 2</option>
                                    <option value="0">从不发送通知</option>
                                </select>
                            </p>
							<p>
                                <label for="tagname">通知标签：</label>
                                <input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
						--%>
					<fieldset class="step">
						<legend>Confirm</legend>
						<p>再次确认表中所填数据真是正确，点击注册。 Everything in the form was correctly filled if all the steps have a green checkmark icon. A red checkmark icon indicates that some field is missing or filled out with
							invalid data. In this last step the user can confirm the submission of the form.</p>
						<p class="submit">
							<button id="registerButton" type="button" onclick="login();">注册</button>
						</p>
					</fieldset>
				</form>
			</div>

			<div id="navigation" style="display:none;">
				<ul>
					<li class="selected">
						<a href="#">开户</a>
					</li>
					<li>
						<a href="#">个人信息</a>
					</li>
					<%--<li>
                            <a href="#">开户类型</a>
                        </li>
                        <li>
                            <a href="#">设置</a>
                        </li>
						--%>
					<li>
						<a href="#">确认</a>
					</li>

				</ul>

			</div>
			<ul>
				<p class="selected01">
					<a href="<c:url value="/user/showLoginPage.do"/>" style="color : blue;">直接登录</a>

					<a href="<c:url value="/index.jsp"/>" style="color : blue;">返回首页</a>
				</p>
			</ul>
		</div>
	</div>
</body>
</html>